<template>
  <div class="allOrderContainer">
    <div style="height: 40px; background: #fff">
      <div class="left" style="padding-top: 10px">
        <buttonPage></buttonPage>
      </div>
      <div class="right" style="padding-top: 10px">
        <el-pagination
          small
          :current-page="currentPage"
          :page-sizes="[100, 200, 500, 1000]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="orderlist.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 表格展示部分 -->
    <div class="displayArea" style="padding-top: 10px">
      <!-- 可以横向滚动的后面几列 -->
      <tableForm :msg="orderTitles" :msgList="orderlist"></tableForm>
    </div>
    <div class="footer">
      <!-- 选中&nbsp;&nbsp;&nbsp;&nbsp;{{ sumOrder }}&nbsp;&nbsp;&nbsp;&nbsp;单 -->
    </div>
  </div>
</template>
<script>
import buttonPage from "../button/buttonPage.vue";
import tableForm from "../table/table.vue";
import { reqWarningData } from "@/api/message";
import "./index.scss";
export default {
  name: "index",
  components: { buttonPage, tableForm },
  data() {
    return {
      // 动态表头
      orderTitles: [],
      // 动态数据
      orderlist: [],
      currentPage: 1,
      addOrderVisible: false, //这个是点击添加订单的
      selectAreaVisible: true, //这个是筛选那一行
      dialogVisible: false, //这个是打印预览的对话框
      dialogVisibleFaceFn: false, //打印面单
      setHeaderProperty: false, //添加表头属性的
      setHeaderProperty: false, //控制添加表头属性的对话框的显示隐藏
      newAddState: false,
      orders: [
        // 测试用的订单
        // { id: 1, num: 111111, flag: "success", isCheck: false },
        // { id: 2, num: 222222, flag: "success", isCheck: false },
        // { id: 3, num: 333333, flag: "fail", isCheck: false },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "", // select表单的value值
      targetTime: "",
      pickerOptions: {
        // 时间选择器的快选项
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {},
  mounted() {
    this.displayWarning();
  },
  computed: {
    f1() {
      return this.$store.state.orderForm.addOrder;
    },
  },
  methods: {
    async displayWarning() {
      let result = await reqWarningData();
      // 动态表头
      this.orderTitles = result.data.headers;
      // 动态添加数据
      var list = result.data.list;
      for (var i = 0; i < list.length; i++) {
        list[i]["isCheck"] = false;
      }
      this.orderlist = list;
    },
    handleSizeChange(val) {
    },
    handleCurrentChange(val) {
    },
  },
};
</script>
